<template>
    <div>
        <NavTop></NavTop>
        <div style="margin: auto; width: 80%;">
            <el-table :data="filteredData" :border="parentBorder" style="width: 100%">
                <el-table-column type="expand">
                <template #default="props">
                    <div m="4">
                        <el-table :data="props.row.child" :border="childBorder">
                            <el-table-column label="商品编号" prop="id" />
                            <el-table-column label="商品名称" prop="name" />
                            <el-table-column label="价格" prop="price" />
                            <el-table-column label="数量" prop="num" />
                            <el-table-column label="总价" prop="total" />
                        </el-table>
                    </div>
                </template>
                </el-table-column>
                <el-table-column label="订单编号" prop="orderID" />
                <el-table-column label="订单日期" prop="time" />
                <el-table-column label="订单数量" prop="num" />
                <el-table-column label="订单金额" prop="sum" />
                <el-table-column align="right">
                    <template #header>
                        <el-input v-model="search" size="small" placeholder="Type to search"/>
                    </template>

                    <template #default="scope">
                        <el-button
                        size="small"
                        type="danger"
                        @click="handleBuy(scope.$index)"
                         v-if="!scope.row.isOrdered">
                        支付
                        </el-button>
                        <el-button
                        size="small"
                        type="success"
                        disabled="true"
                        v-else>
                        已支付
                        </el-button>
                        <el-button
                        size="small"
                        type="danger"
                        @click="handleDelete(scope.$index)"
                        >
                        删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import NavTop from '@/components/NavTop.vue';
import { ElMessageBox } from 'element-plus'
import { ElMessage } from 'element-plus'


export default{
    components:{
        NavTop
    },
    data() {
        return {
            tableData:JSON.parse(sessionStorage.getItem('order')),
            search:''
        }
    },
    methods: {
        handleBuy(index) {
            ElMessageBox.confirm(
                '你是否要支付?',
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
            .then(() => {
                ElMessage({
                    type: 'success',
                    message: '支付成功',
                })
                this.tableData[index].isOrdered = true
                sessionStorage.setItem('order', JSON.stringify(this.tableData))
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '取消',
                })
                
            })
        },
        handleDelete(index) {
            ElMessageBox.confirm(
                '你是否要删除?',
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
            .then(() => {
                ElMessage({
                    type: 'success',
                    message: '完全删除',
                })
                this.tableData.splice(index, 1)
                sessionStorage.setItem('order', JSON.stringify(this.tableData))
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '取消删除',
                })
            })
            
        }
    },
    computed:{
        filteredData() {
            if (!this.search) {
                return this.tableData;
            }
            return this.tableData.filter(item => {
                return (item.orderID.includes(this.search))
            });
    }
}
    
}
</script>